<template>
  <div class="my-nav">
    <ul>
      <router-link to="/recommend" active-class="sel" tag="li">
        推荐
      </router-link>
      <router-link to="/singer" active-class="sel" tag="li">歌手</router-link>
      <router-link to="/rank" active-class="sel" tag="li">排行</router-link>
      <router-link to="/search" active-class="sel" tag="li">搜索</router-link>
    </ul>
  </div>
</template>
<script>
// 将图片当成变量来用
import logo from "../assets/logo.png";
console.log(logo);
export default {
  data() {
    return {
      img: logo,
    };
  },
};
</script>

<style lang="less" scoped>
@import "@styles/index.less";
.my-nav {
  color: rgba(255, 255, 255, 0.6);
  .fs(15);
  font-weight: 400;
  ul {
    display: flex;
    li {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .sel {
      color: @font-yellow;
    }
  }
}
</style>
